<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>nodom-example slot</title>
		
	</head>
	<body>
	</body>
	<script type='module'>
		import{Nodom,Module,ModuleFactory} from '/dist/nodom.esm.js'
        class M1 extends Module{
            template(){
                return `
                    <div style='background-color:lightblue' class='m1' role='m1'>
                        <h3>M1 Start</h3>
                        <slot />
                        <h3>M1 End</h3>
                    </div>
                `
            }
        }

        class M2 extends Module{
            modules=[M1];
            template(){
                return `
                    <div>
                        <h1> M2 Start </h1>
                        <m1>
                            <p>this is m1 in m2</p>
                            <slot>
                                m2 替换 m1 default
                            </slot>
                            <slot name='s1'/>
                        </m1>
                        <h1>M2 End </h1>
                    </div>
                `
            }
            data(){
                return {
                    textm2:'内容来源于m2'
                }
            }
        }

        class MMain extends Module{
            modules=[M2];
			/**
			 * 模版函数
			 */
			template(){
                return `
                    <div>
                        MainStart
                        <m2>
                            <p>hello slot</p>
                            <slot name='s1'>
                               <p> 替换m2 s1</p>
                            </slot>
                        </m2>

                    </div>
				`
			}

			/**
			 * 数据函数
			 */
			data(){
				return{
                    show:true,
					textm1:'内容来源于main',
                    textm3:'内容来源于main',
                    rows:[{title:'aaa'},{title:'bbb'}]
				}
			}	
            change(){
                this.model.textm1 = '来源于main的内容text1已经被修改'
                this.model.textm3 = '来源于main的内容text3已经被修改'
                this.model.rows.splice(1,0,{title:'ccc'});
                this.model.show = !this.model.show;
            }

            clickme(){
                const m1 = this.getModule('M1',true);
                console.log(m1,m1.srcDom.slotModuleId);
                console.log('click')
            }

            genText(t){
                console.log(t);
                return t.toUpperCase();
            }
       	}
    	Nodom.app(MMain);
	</script>
</html>
